Flexbox

Grow, shrink, basis

Introduzione ai concetti flex-grow, flex-shrink e flex-basis

Nel sistema Flexbox, la dimensione degli elementi lungo l’asse principale è controllata da tre proprietà fondamentali: flex-grow, flex-shrink e flex-basis. TailwindCSS fornisce utility dedicate che permettono di gestire questi comportamenti in modo dichiarativo e coerente.

flex-basis: dimensione iniziale dell’elemento

flex-basis definisce la dimensione iniziale di un flex item prima che lo spazio disponibile venga distribuito.

Utility principali:

• basis-0 → flex-basis: 0px
• basis-auto → flex-basis: auto
• basis-full → flex-basis: 100%
• basis-1/2, basis-1/3, basis-1/4, ecc. → percentuali predefinite
• basis-[value] → valore arbitrario

Esempio: Un elemento con basis-1/2 occupa inizialmente il 50% dello spazio del container, indipendentemente dal contenuto.

Nota importante: flex-basis ha priorità su width quando l’elemento è un flex item.

flex-grow: espansione nello spazio disponibile

flex-grow controlla quanto un elemento può crescere rispetto agli altri quando c’è spazio libero nel container.

Utility principali:

• grow → flex-grow: 1
• grow-0 → flex-grow: 0
• grow-[value] → valore numerico personalizzato

Comportamento:

• grow-0 impedisce all’elemento di espandersi
• grow permette all’elemento di occupare lo spazio rimanente
• valori maggiori di 1 aumentano il peso relativo nella distribuzione

Esempio concettuale: Se due elementi hanno grow e grow-0, solo il primo si espande. Se due elementi hanno grow ma uno ha grow-2, quest’ultimo riceverà il doppio dello spazio.

flex-shrink: riduzione quando lo spazio non basta

flex-shrink definisce quanto un elemento può ridursi quando lo spazio totale è insufficiente.

Utility principali:

• shrink → flex-shrink: 1
• shrink-0 → flex-shrink: 0
• shrink-[value] → valore numerico personalizzato

Comportamento:

• shrink-0 impedisce all’elemento di ridursi, anche se causa overflow
• shrink consente la riduzione proporzionale
• valori più alti riducono l’elemento più velocemente rispetto agli altri

Caso comune: Usare shrink-0 per loghi, icone o sidebar che non devono comprimersi.

La shorthand flex e le utility correlate

In CSS, la proprietà flex è una shorthand per grow, shrink e basis. Tailwind fornisce utility che combinano questi valori.

Utility principali:

• flex-1 → flex: 1 1 0%
• flex-auto → flex: 1 1 auto
• flex-initial → flex: 0 1 auto
• flex-none → flex: 0 0 auto

Differenze chiave:

• flex-1 è ideale per layout fluidi e colonne responsive
• flex-auto rispetta la dimensione del contenuto ma consente crescita
• flex-none blocca completamente crescita e riduzione

Relazione tra grow, shrink e basis

Il browser calcola la dimensione finale seguendo questo ordine:

1. Determinazione della flex-basis
2. Verifica dello spazio disponibile
3. Applicazione di flex-grow se c’è spazio libero
4. Applicazione di flex-shrink se lo spazio è insufficiente

Implicazione pratica: Impostare basis-0 con grow garantisce una distribuzione uniforme, indipendente dal contenuto.

Pattern comuni di utilizzo

Colonne con larghezza uguale:

• basis-0 grow per tutti gli elementi

Sidebar fissa + contenuto fluido:

• Sidebar: shrink-0 basis-[larghezza]
• Contenuto: grow

Card responsive:

• flex-auto per adattarsi al contenuto
• grow per riempire righe incomplete

Uso con breakpoint responsive

Tutte le utility grow, shrink e basis supportano i breakpoint.

Esempio concettuale:

• basis-full su mobile
• md:basis-1/2 su tablet
• lg:basis-1/3 su desktop

Questo approccio consente layout completamente adattivi senza media query personalizzate.

Errori comuni da evitare

• Usare width al posto di basis sui flex item
• Dimenticare shrink-0 su elementi che non devono comprimersi
• Usare grow senza controllare la basis, causando distribuzioni inattese
• Mescolare flex-none con grow su elementi che devono essere fluidi